<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Buttons</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content"><div class="block-title">Usual Buttons</div>
<div class="block">
<div class="row">
<button class="button col">Button</button>
<button class="button col">Button</button>
<button class="button col button-round">Round</button>
</div>
</div>
<div class="block-title">Fill Buttons</div>
<div class="block">
<div class="row">
<button class="col button button-fill">Button</button>
<button class="col button button-fill">Button</button>
<button class="col button button-fill button-round">Round</button>
</div>
</div>
<div class="block-title">Outline Buttons (MD-theme only)</div>
<div class="block">
<div class="row">
<button class="col button button-outline">Button</button>
<button class="col button button-outline">Button</button>
<button class="col button button-outline button-round">Round</button>
</div>
</div>
<div class="block-title">Raised Buttons (MD-theme only)</div>
<div class="block">
<p class="row">
<button class="col button button-raised">Button</button>
<button class="col button button-raised button-fill">Fill</button>
<button class="col button button-outline button-raised">Outline</button>
</p>
<p class="row">
<button class="col button button-raised button-round">Round</button>
<button class="col button button-raised button-fill button-round">Fill</button>
<button class="col button button-outline button-round button-raised">Outline</button>
</p>
</div>
<div class="block-title">Segmented</div>
<div class="block">
<p class="segmented segmented-raised">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button button-active">Active</button>
</p>
<p class="segmented">
<button class="button button-outline">Outline</button>
<button class="button button-outline">Outline</button>
<button class="button button-outline button-active">Active</button>
</p>
<p class="segmented segmented-raised segmented-round">
<button class="button button-round">Button</button>
<button class="button button-round">Button</button>
<button class="button button-round button-active">Active</button>
</p>
<p class="segmented segmented-round">
<button class="button button-round button-outline">Outline</button>
<button class="button button-round button-outline">Outline</button>
<button class="button button-round button-outline button-active">Active</button>
</p>
</div>
<div class="block-title">Big Buttons</div>
<div class="block">
<p class="row">
<button class="col button button-big">Button</button>
<button class="col button button-big button-fill">Fill</button>
</p>
<p class="row">
<button class="col button button-big button-raised">Raised</button>
<button class="col button button-big button-raised button-fill">Raised Fill</button>
</p>
</div>
<div class="block-title">Small Buttons</div>
<div class="block">
<p class="row">
<button class="col button button-small">Button</button>
<button class="col button button-small button-outline">Outline</button>
<button class="col button button-small button-fill">Fill</button>
</p>
<p class="row">
<button class="col button button-small button-round">Button</button>
<button class="col button button-small button-round button-outline">Outline</button>
<button class="col button button-small button-round button-fill">Fill</button>
</p>
</div>
<div class="block-title">Color Buttons</div>
<div class="block">
<p class="row">
<button class="col button color-red">Red</button>
<button class="col button color-green">Green</button>
<button class="col button color-blue">Blue</button>
</p>
<p class="row">
<button class="col button color-pink">Pink</button>
<button class="col button color-yellow">Yellow</button>
<button class="col button color-orange">Orange</button>
</p>
<p class="row">
<button class="col button color-gray">Gray</button>
<button class="col button color-black">Black</button>
</p>
</div>
<div class="block-title">Color Fill Buttons</div>
<div class="block">
<p class="row">
<button class="col button button-fill color-red">Red</button>
<button class="col button button-fill color-green">Green</button>
<button class="col button button-fill color-blue">Blue</button>
</p>
<p class="row">
<button class="col button button-fill color-pink">Pink</button>
<button class="col button button-fill color-yellow">Yellow</button>
<button class="col button button-fill color-orange">Orange</button>
</p>
<p class="row">
<button class="col button button-fill color-gray">Gray</button>
<button class="col button button-fill color-black">Black</button>
<button class="col button button-fill color-white text-color-black">White</button>
</p>
</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>var app = new Framework7();</script>
  </body>
</html>